.pie {
  margin: 25px;
}

.pie text {
  font-family: "Verdana";
  fill: #fff;
  align-items: center;
  margin-left: -10px;
  position: absolute;
  pointer-events: none;
}

.pie .name-text{
  font-size: .75em;
}

.pie .value-text{
  font-size: 1em;
}

button {
  width            : 150px;
  height           : 50px;
  margin           : 5px;
  padding          : 0;
  color            : white;
  border           : 1px solid rgb(98, 165, 245);
  border-radius    : 5px;
  background       : none;
  background-color : none;
  outline          : inherit;
  font             : inherit;
  cursor           : pointer;

  -moz-transition    : background-color 200ms cubic-bezier(0.250, 0.645, 0.795, 0.200);
  -o-transition      : background-color 200ms cubic-bezier(0.250, 0.645, 0.795, 0.200);
  -webkit-transition : background-color 200ms cubic-bezier(0.250, 0.645, 0.795, 0.200);
  transition         : background-color 200ms cubic-bezier(0.250, 0.645, 0.795, 0.200);
}
button:hover{
  background-color : rgb(82, 82, 219);
}

circle,
path {
  opacity            : 1;
  -moz-transition    : fill,
                       opacity 200ms cubic-bezier(0.250, 0.645, 0.795, 0.200);
  -o-transition      : fill,
                       opacity 200ms cubic-bezier(0.250, 0.645, 0.795, 0.200);
  -webkit-transition : fill,
                       opacity 200ms cubic-bezier(0.250, 0.645, 0.795, 0.200);
  transition         : fill,
                       opacity 200ms cubic-bezier(0.250, 0.645, 0.795, 0.200);
}

svg > g:hover circle:not(:hover),
svg > g:hover path:not(:hover) {
  opacity : .5;
}
